<template>
	<view class="fees">
		<view style="height:40rpx;"></view>
		<view class="list">
			<view class="item" v-for="item in dataList">
				<view class="itemTitle">{{item.product_title}}</view>
				<view class="content">
					<view class="items flexSpace">
						<view class="label">{{$t('info.order')}}：</view>
						<view>{{item.order_id}}</view>
					</view>
					<view class="items flexSpace">
						<view class="label">{{$t('contract.price')}}：</view>
						<view>{{Number(item.price)}} {{item.coin}}</view>
					</view>
					<view class="items flexSpace">
						<view class="label">{{$t('info.number')}}：</view>
						<view>{{item.buy_shares}}</view>
					</view>
					<view class="items flexSpace">
						<view class="label">{{$t('order.time')}}：</view>
						<view>{{item.created_at}}</view>
					</view>
				</view>
				<view class="bottom flexSpace">
					<view class="due">{{$t('yuebao.expirationTime')}}：{{item.product_expires_at}}</view>
					<view class="btn" @click="onBuy(item.id)">
						{{$t('home.Renewal')}}
					</view>
				</view>
			</view>
		</view>
		<uniLoadMore :loadingType="loadingType" :contentText="contentText" style="padding:40rpx 0;"></uniLoadMore>
	</view>
</template>

<script>
	import {electList} from '@/api/electFees'
	import uniLoadMore from '@/components/uni-load-more.vue';
	export default {
		components:{
			uniLoadMore
		},
		data(){
			return{
				page:1,
				total:0,
				dataList:[],
				loadingType: 0
			}
		},
		created() {
			this.getElectList()
		},
		computed:{
			contentText(){
				return{
					contentdown: this.$t('info.contentText.contentdown'),
					contentrefresh: this.$t('info.contentText.contentrefresh'),
					contentnomore: this.$t('info.contentText.contentnomore')
				}
			}
		},
		methods:{
			getElectList(bol){
				var time = Math.round(new Date().getTime()/1000);
				var data = {
					page:this.page,
					time:time
				}
				electList(data).then(res=>{
					if(res.code = 1000){
						if (bol) {
							this.dataList = [];
						}
						this.total = Number(res.data.count)
						let arr = res.data.data
						this.dataList.push(...arr)
					}else{
						this.loadingType = 3
						this.dataList = [];
					}
				}).catch(() => {
					this.loadingType = 3
					this.dataList = [];
				})
				uni.stopPullDownRefresh();
			},
			onBuy(id){
				uni.navigateTo({
					url:'/pages/electFees/order?id='+ id
				})
			},
			onPullDownRefresh() {
				this.page = 1;
				this.loadingType = 0;
				this.getElectList(true);
			},
			onReachBottom() {
				if (this.loadingType !== 0) {
					return
				}
				this.getElectList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.fees{
		width: 100%;
		min-height: 100vh;
		background: #F7F8FCFF;
		.title{
			font-size: 24rpx;
			color: #F2A049FF;
			padding: 46rpx 0 34rpx;
			text-align: center;
		}
		.list{
			padding:0 32rpx;
			.item{
				padding:0 32rpx;
				background: #fff;
				border-radius:10rpx;
				margin-bottom: 32rpx;
				.itemTitle{
					font-size:36rpx;
					color: #262628FF;
					border-bottom: 1px solid #eee;
					padding:36rpx 0;
				}
				.content{
					border-bottom: 1px solid #eee;
					padding-bottom: 24rpx;
					.items{
						font-size: 28rpx;
						color: #61636FFF;
						margin-top:24rpx;
					}
				}
				.bottom{
					padding:20rpx 0 36rpx;
					align-items: center;
					.due{
						font-size:24rpx;
						color:#F2A049FF ;
					}
					.btn{
						font-size: 32rpx;
						padding:16rpx 22rpx;
						color: #fff;
						background: #F95554FF;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>